<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>剖析Element对象</title>

        <style type="text/css">
            .container {
                border: 1px solid blue ;
                margin: 15px ;
            }

            .container div {
                line-height: 36px ;
                border-bottom: 1px solid #dedede ;
            }
        </style>

    </head>
    <body>

        <div class="container first">
            <h3>Element</h3>
        </div>

        <div class="container second">
            <h3>Element.prototype</h3>
        </div>

        <script type="text/javascript">
            (function(){
                let names ;
                // 根据 CSS 选择器 选择页面上的元素( Element )
                let fc = document.querySelector( '.first' );

                names = Object.getOwnPropertyNames( Element );
                names.forEach( function( e ){
                    let d = document.createElement( 'div' );
                    d.innerHTML = 'Element.' + e ;
                    fc.appendChild( d ); // Node.prototype.appendChild
                } );

                // 根据 CSS 选择器 选择页面上的元素
                let sc = document.querySelector( '.second' );

                names = Object.getOwnPropertyNames( Element.prototype );
                names.forEach( e => {
                    let d = document.createElement( 'div' );
                    d.innerHTML = 'Element.prototype.' + e ;
                    sc.appendChild( d ); // Node.prototype.appendChild
                } );

            })();
        </script>
        
    </body>
</html>